<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JQuery方法创建元素的方式</title>
</head>
<body>
  <div id="box">
    呵呵呵
    <span>这是原始的span</span>
  </div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    // html() -用于在指定元素中进行结构创建
    //  - 传入字符串参数，参数会被设置为元素的内容，结构文本会被生成
    //  - 会覆盖原来的结构
    $('#box').html('新的内容<span>这是span标签</span>');
    //  - 获取元素结构(不传参数，表示获取元素内部结构)
    console.log($('#box').html());

    // $() -用于直接创建元素
    //  -传入结构字符串，结构会被生成，默认不在页面中显示，需要使用后续的元素移动操作
    console.log($('<div>这是div标签<span>这是div标签中的span标签</span></div>'));
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery元素的移动和创建方式 前4种</title>
</head>
<body>
  <p class="text3">这是p标签text3</p>
  <p class="text">这是p标签text</p>
  <div id="box">
    原始内容
    <ul></ul>
  </div>
  <p class="text2">这是p标签text2</p>
  <p class="text4">这是p标签text4</p>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //1.追加元素方式 append() - 移动后的位置为最后
    // - 直接通过append()进行创建和放入
    $('#box').append('<p>这是用append()的创建的p标签，放入id是box的div标签中</p>');
    // - 先通过$()方式创建元素，在通过append()方式放入
    var $div = $('<div>通过上节$()方式创建的div，将使用append()方式放入id是box的div标签中</div>');
    $('#box').append($div);
    // -移动已经存在页面中的元素
    //  -可以进行单个移动
    //  -由于jQuery具有隐式迭代的特性
    //   当调用的jQuery对象为多个元素时，移动的元素会被复制多份，并依次放入
    //   -注意：如果元素会被设置为多份，切记不要设置id
    var $text = $('.text');
    $('#box').append($text);

    //2.prepend() 向指定元素内部的最前面插入元素
    // -直接通过prepend()进行创建和放入
    $('#box').prepend('<p>这是通过prepend()方式创建的p标签，放入id是box的div标签中</p>');
    // - 先通过$()方式创建元素，在通过prepend()方式放入
    var $div = $('<div>通过上节$()方式创建的div,将使用perpend()方式放入id是box的div标签中</div>');
    $('#box').prepend($div);
    // -移动已经存在页面中的元素
    //  -可以进行单个移动
    //  -由于jQuery具有隐式迭代的特性
    //   当调用的jQuery对象为多个元素时，移动的元素会被复制多份，并依次放入
    //   -注意：如果元素会被设置为多份，切记不要设置id
    $('#box').prepend($('.text2'));

    //3.after()将元素移动到 指定的元素 同级的后面
    // -直接通过after()进行创建和放入到对应的位置
    $('#box').after('<span>这是通过after()方式创建的,与id是box的div标签 同级span标签</span>');
    // -移动已经存在页面中的元素
    $('#box').after($('.text3'));

    //4.before()将元素移动到 指定元素 同级的前面
    //-直接通过before()进行创建和放入到对应的位置
    $('#box').before('<p>这是通过before()方式创建的p标签，放入id是box的div标签前面</p>');
    //-移动已经存在页面中的元素
    $('#box').before($('.text4'));
  </script>
</body>
</html> -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery元素的移动和创建方式 后4种</title>
</head>
<body>
  <p class="text4">这是p标签text4</p>
  <p class="text3">这是p标签text3</p>
  <p class="text2">这是p标签text2</p>
  <p class="text">这是p标签text</p>
  <div id="box">
    <span>这是span</span>
  </div>
  <span class="sp">我是id是box同级元素 span标签</span>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //下面的四种新方法与前面的4个方法功能对应，目的是为了完善链式编程
    //5.appendTo() - 移动后的位置为最后
    // - 参数可以设置为jQuery对象，表示要移动的位置
    // - 参数可以为选择器字符串，表示要移动的的位置(使用比前4种方式更方便)
    $('.text').text('这是通过appendTo()方式，把类名为text的p标签移动到id是box的盒子的最后面').appendTo($('#box'));
    //演示参数可以是 选择器字符串
    $('.text2').appendTo('#box');

    //6.preappendTo() - 向指定元素内部的最前面插入元素
    // - 参数可以设置为jQuery对象，表示要移动的位置
    // - 参数可以为选择器字符串，表示要移动的的位置(使用比前4种方式更方便)
    // - 这俩个的效果是一样的，只是prependTo()中的参数方式不同(1 jQuery对象方式，2 选择器字符串方式)
    $('.text3').prependTo($('#box'));
    $('.text3').prependTo('#box');

    //7.insertAfter() - 将元素移动到 指定的元素 同级的后面
    // - 参数可以设置为jQuery对象，表示要移动的位置
    // - 参数可以为选择器字符串，表示要移动的的位置(使用比前4种方式更方便)
    // - 这俩个的效果是一样的，只是inserAfter()中的参数方式不同(1 jQuery对象方式，2 选择器字符串方式)
    $('.text4').insertAfter($('#box'));
    $('.text4').insertAfter('#box');

    //8.insertBefore() -将元素移动到 指定元素 同级的前面(与webAPI DOM中的insertBefore()用法一点都不一样)
    // - 参数可以设置为jQuery对象，表示要移动的位置
    // - 参数可以为选择器字符串，表示要移动的的位置(使用比前4种方式更方便)
    // - 这俩个的效果是一样的，只是inserBefore()中的参数方式不同(1 jQuery对象方式，2 选择器字符串方式)
    $('.sp').insertBefore($('#box'));
    $('.sp').insertBefore('#box');
  </script>
</body>
</html>